<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="ciui/CiUI.css" />
    <script src="ciui/CiUI.js" type="text/javascript"></script>
  	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>    
  	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAtyszdolYTn9pK5seMWq8shRDiIO9i7IdI7xQHaHlQYSVzooxUBQIWChgh9j1TDNMnC-JS6HKJHbbMw" type="text/javascript"></script>
  </head>
  
  <body>
    <style>
  	/*This CSS is for the tab bar and navigation bar*/
      #headerT{
        position:relative;
        left: 0px;
        top: 55px;
        height: 35px;
        background: url(ciui/images/toolbar.png) repeat-x;
      }
      #textT{
        color: white;
        position: relative;
        text-align: center;
        padding: 0;
        top: 25px;
        font-size: 18px;
        font-family: american typewriter;
        text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
        white-space: nowrap;
        left: -190px;
      }
      #map {
        position: absolute;
        top:119px;
      }
    </style>
    <?php
      include('./navbar.html');
    ?>
    <div id='headerT'></div>
    <div id='textT'>Map Search</div>
    <div id="search_bar" style="text-align:center;">
      <input type="text" name="search_field" id="search_field" style="width:250px;" value="">
      <input class="button" type="submit" name="search_button" id="search_button" value="Search"/>
    </div>
    <div id="map" style="width: 320px; height: 274px"></div>
    
    <script type="text/javascript" charset="utf-8">
    
      //on page load...
      $(document).ready(function(){
        //put this click event listener on the html element with id='search_button'
				$('#search_button').click(function(){
				  //call the function sendValue() with its parameter as the value of the id='search_field' element
          getBuilding($('#search_field').val()); 
          myclick(returnVal);
				});	
			});
      
      var returnVal;
      
      function getBuilding(str){
			  //execute a jQuery AJAX HTTP POST request
			  //the URL being called is maprequest.php, which parses the input using PHP
			  //sendToValue is the name of the POST variable that will be used by maprequest.php by extracting from the global $_POST[] array    
        $.ajax({
          async: false,
    			type: "POST",
    			url: "maprequest.php",
    			dataType: "json",
    			data: { sendToValue: str },
    			success: function(data) {
    			  returnVal = data.returnFromValue;
    			}
    		});
			}
      
      if (GBrowserIsCompatible()) { 
        var result_html = "";
        
        // Display the map, with some controls and set the initial location 
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(37.42774034893813, -122.1699857711792),15);
        //set the default center of the map to the coordinates specified here, with zoom factor 9 (0 is maximum distance "away" or "outward" zoom)
        
        //Parses the mapinfo.xml file for marker data and displays them
        GDownloadUrl("mapinfo.xml", function(doc) {
          var xmlDoc = GXml.parse(doc);
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
          }
        });
        
      } else { // display a warning if the browser was not compatible
        alert("Sorry, the Google Maps API is not compatible with this browser");
      }		
      
      // A function to create the marker and set up the event window
      // Dont try to unroll this function. It has to be here for the function closure
      // Each instance of the function preserves the contends of a different instance
      // of the "marker" and "html" variables which will be needed later when the event triggers.    
      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers.push(marker);
        return marker;
      }
      
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }
      
      var gmarkers = [];
    </script>
  </body>
</html>